<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>练习2</title>
    <link rel="stylesheet" href="./练习2.css" />
    <style>
      .wapper {
        position: relative;
        margin: 0 auto;
        width: 1100px;
        height: 900px;
      }
      #top {
        width: 800px;
        margin: 0 auto;
      }
      .top1 {
        margin-left: 10px;
        font-family: "楷体";
        font-size: 40px;
        color: burlywood;
        text-decoration: none;
        display: inline-block;
        width: 50px;
        height: 49px;
        text-align: center;
        border: solid 1px black;
      }
      .top1:hover {
        color: white;
        background-color: burlywood;
      }
      .head {
        background-color: burlywood;
        width: 800px;
        height: 25px;
        margin: 0 auto;
      }
      button {
        color: white;
        background-color: burlywood;
        width: 50px;
        height: 24px;
        border-bottom: solid 1px wheat;
        border-top: solid 0.5px black;
        border-left: solid 0.5px black;
        border-right: solid 0.5px black;
      }
      button:hover {
        background-color: sienna;
      }
      .month {
        /* 样式 solid实线,dashed虚线,dooted点线double 双线groove 3D样式 */
        border: solid 1px black;
        /* 设置边框线折叠 */
        border-collapse: collapse;
      }
      .month td {
        width: 60px;
        height: 30px;
        text-align: center;
        border: solid 1px black;
      }
      .marry {
        position: absolute;
        right: 3px;
        top: 110px;
        /* 样式 solid实线,dashed虚线,dooted点线double 双线groove 3D样式 */
        border: solid 1px black;
        /* 设置边框线折叠 */
      }
      .marry td {
        width: 80px;
        height: 30px;
        text-align: center;
      }
      .date {
        padding: 20px;
        width: 750px;
        height: 800px;
        margin-left: 20px;
        border: solid 1px burlywood;
      }
      a {
        text-decoration: none;
      }
      .inn:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div class="wapper">
      <div id="top">
        <a class="top1" href="">鼠</a>
        <a class="top1" href="">牛</a>
        <a class="top1" href="">虎</a>
        <a class="top1" href="">兔</a>
        <a class="top1" href="">龙</a>
        <a class="top1" href="">蛇</a>
        <a class="top1" href="">马</a>
        <a class="top1" href="">羊</a>
        <a class="top1" href="">猴</a>
        <a class="top1" href="">鸡</a>
        <a class="top1" href="">狗</a>
        <a class="top1" href="">猪</a>
      </div>
      <br />
      <div class="head">
        <button>首页</button>
        <button>解梦</button>
        <button>测名</button>
        <button>起名</button>
        <button>讲堂</button>
        <button>测试</button>
        <button>配对</button>
        <button>生日</button>
        <button>号码</button>
        <button>测字</button>
        <button>黄历</button>
      </div>
      <br />
      <div class="date">
        <table class="month">
          <tr>
            <td colspan="12">一月</td>
          </tr>
          <tr>
            <td>
              <a
                class="inn"
                href="https://www.12880.com/huangli/2024-1-1"
                target="_blank"
                >1日</a
              >
            </td>
            <td>2日</td>
            <td>3日</td>
            <td>4日</td>
            <td>5日</td>
            <td>6日</td>
            <td>7日</td>
            <td>8日</td>
            <td>9日</td>
            <td>10日</td>
            <td>11日</td>
            <td>12日</td>
          </tr>
          <tr>
            <td>13日</td>
            <td>14日</td>
            <td>15日</td>
            <td>16日</td>
            <td>17日</td>
            <td>18日</td>
            <td>19日</td>
            <td>20日</td>
            <td>21日</td>
            <td>22日</td>
            <td>23日</td>
            <td>24日</td>
          </tr>
          <tr>
            <td>25日</td>
            <td>26日</td>
            <td>27日</td>
            <td>28日</td>
            <td>29日</td>
            <td>30日</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table>

        <table class="marry">
          <tr>
            <td colspan="3">2024年结婚黄道吉日</td>
          </tr>
          <tr>
            <td>一月结婚</td>
            <td>二月结婚</td>
            <td>三月结婚</td>
          </tr>
          <tr>
            <td>四月结婚</td>
            <td>五月结婚</td>
            <td>六月结婚</td>
          </tr>
          <tr>
            <td>七月结婚</td>
            <td>八月结婚</td>
            <td>九月结婚</td>
          </tr>
          <tr>
            <td>十月结婚</td>
            <td>十一月结婚</td>
            <td>十二月结婚</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>
